<template>
  <n-drawer v-model:show="isDrawer" width="1000" :auto-focus="false" @after-leave="handleReset">
    <n-drawer-content title="门店策略" closable>
      <n-form
        :model="formParams"
        :rules="rules"
        ref="formRef"
        label-placement="left"
        :label-width="100"
      >
        <n-form-item label="每**分钟" path="minute">
          <n-input placeholder="请输入每**分钟" v-model:value="formParams.minute" />
        </n-form-item>
        <n-form-item label="金额" path="danjia">
          <n-input placeholder="请输入金额" v-model:value="formParams.danjia" />
        </n-form-item>
        <n-form-item label="属性" path="attr">
          <n-radio-group v-model:value="formParams.attr" name="attr">
            <n-space>
              <n-radio :key="1" :value="1">普通宝</n-radio>
              <n-radio :key="2" :value="2">快充宝</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="免费策略(几分钟内免费)" path="mianfei">
          <n-input placeholder="请输入分钟数" v-model:value="formParams.mianfei" />
        </n-form-item>
        <n-form-item label="封顶时长" path="maxshichang">
          <n-input placeholder="请输入封顶时长" v-model:value="formParams.maxshichang" />
        </n-form-item>
        <n-form-item label="封顶金额" path="maxmoney">
          <n-input placeholder="请输入封顶金额" v-model:value="formParams.maxmoney" />
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space>
          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useMessage, FormRules } from 'naive-ui';
  import { timingInfo,timingEdit,timingAdd } from '@/api/chargeplan/index';

  const rules: FormRules = {
    minute: {
      required: true,
      message: '分钟不能为空',
      trigger: 'blur',
    }, danjia: {
      required: true,
      message: '单价不能为空',
      trigger: 'blur',
    }, mianfei: {
      required: true,
      message: '免费策略不能为空',
      trigger: 'blur',
    }, maxshichang: {
      required: true,
      message: '封顶时长不能为空',
      trigger: 'blur',
    }, maxmoney: {
      required: true,
      message: '封顶金额不能为空',
      trigger: 'blur',
    }
  };

  const defaultValueRef = () => ({
    id: null,
    minute: '',
    danjia: '',
    attr: 1,
    mianfei: '',
    maxshichang: '',
    maxmoney: '',
  });

  const message = useMessage();
  const formRef: any = ref(null);
  const isDrawer = ref(false);
  const subLoading = ref(false);
  const formParams = ref(defaultValueRef());
  const emit = defineEmits(['change']);

  async function openDrawer(id?) {
    if (id) {
      formParams.value.id = id;
      getInfo();
      return;
    }
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        const msg = formParams.value.id ? '编辑成功' : '添加成功';
        if (formParams.value.id) {
          timingEdit(formParams.value).then((_) => {
            message.success(msg);
            emit('change');
            handleReset();
            closeDrawer();
          });
        }else{
          timingAdd(formParams.value).then((_) => {
            message.success(msg);
            emit('change');
            handleReset();
            closeDrawer();
          });
        }
      } else {
        message.error('请填写完整信息');
      }
    });
  }

  function handleReset() {
    formRef.value.restoreValidation();
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  function getInfo() {
    timingInfo({ id: formParams.value.id }).then((res) => {
      const params = {
        id: formParams.value.id,
        minute: res.minute,
        danjia: res.danjia,
        attr: res.attr,
        mianfei: res.mianfei,
        maxshichang: res.maxshichang,
        maxmoney: res.maxmoney,
      };

      formParams.value = Object.assign(formParams.value, params);
      isDrawer.value = true;
    });
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
<style scoped>
  .top{
    height: 60px;
  }

  .top .left{
    float: left;
    width: 14%;
  }

  .top .right{
    cursor: not-allowed;
    height: 34px;
    line-height: 34px;
    float: left;
    width: 84%;
  }
  .top .right span:nth-of-type(1){
    float: left;
    width: 8%;
    text-align: center;
    margin-right: 10px;
  }

  .top .right .input{
    float: left;
    width: 15%;
    padding-left: 1%;
    border: 1px solid #dfe4ed;
    border-left: none;
    border-right: none;
  }

  .top .right span:nth-of-type(2){
    float: left;
    width: 8%;
    text-align: center;
    border: 1px solid #dfe4ed;
    background-color: #f5f7fa;
  }

  .center .liebiao{
    height: 50px;
  }

  .center .liebiao .left{
    float: left;
    width: 30%;
    height: 34px;
  }

  .center .liebiao .left span{
    float: left;
    height: 34px;
    line-height: 34px;
  }

  .center .liebiao .left .input{
    float: left;
    width: 180px;
    margin-left: 20px;
  }

  .center .liebiao .right{
    float: left;
    width: 76px;
    text-align: center;
    height: 34px;
    line-height: 34px;
    background: #ff4949;
    color: #fff;
    border-radius: 6px;
  }

</style>
